<template>
  <view>
    <u-navbar
      title="任务中心"
      :autoBack="true"
      :bgColor="navBgColor"
      leftIconColor="'#333'"
      :fixed="false"
      :titleStyle="{ color: '#333', 'font-weight': '500', fontSize: '34rpx' }"
    >
    </u-navbar>
    <view> </view>
    <view
      v-if="data.length > 0"
      style="
        height: 213upx;
        background: #50cca6;
        border-radius: 16rpx;
        width: calc(100% - 48rpx);
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 30rpx;

        /* padding: 0 32rpx; */
      "
    >
      <view
        style="
          padding: 0 24rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        "
      >
        <view
          style="
            display: flex;
            justify-content: space-between;
            padding: 24rpx 0 29rpx 0;
            flex-direction: column;
          "
        >
          <text style="font-size: 40rpx; line-height: 59rpx; color: #fff"
            >已连续签到{{ dayNums }}天</text
          >
          <text
            style="
              font-size: 24rpx;
              color: #ffffff;
              line-height: 36rpx;
              margin-top: 12rpx;
            "
            >{{ data[0].init == 1 ? "明" : "今" }}日签到可得{{
              coinList[dayNums]
            }}金币</text
          >
        </view>
        <view>
          <u-button
            class="button"
            :text="data[0].init == 1 ? '已签到' : '签到'"
            :disabled="data[0].init == 1 ? true : false"
            @click="taskTo(1)"
          ></u-button>
        </view>
      </view>
    </view>
    <view
      class="a"
      style="
        background-color: #fff;
        padding-top: 34rpx;
        padding-bottom: 19rpx;
        margin: 0 24rpx;
        margin-top: 24rpx;
        border-radius: 16rpx;
      "
    >
      <text
        style="
          font-size: 34rpx;
          font-weight: 500;
          color: #333333;
          line-height: 50rpx;
          padding-left: 32rpx;
        "
        >日常任务</text
      >
      <view
        style="
          display: flex;
          justify-content: space-between;
          padding: 24rpx 0;
          margin: 15rpx 32rpx;
        "
        v-for="(item, index) in data.slice(1)"
        :key="index"
      >
        <view style="display: flex; align-items: center">
          <image
            :src="item.image"
            style="width: 72rpx; height: 72rpx; margin-right: 16rpx"
          ></image>
          <view>
            <view style="font-size: 32rpx; color: #333333; line-height: 47rpx">
              <text>{{ item.name }}</text>
            </view>
            <view
              style="
                font-size: 20rpx;
                font-weight: 500;
                color: #999999;
                line-height: 29rpx;
                display: flex;
                text-align: left;
              "
            >
              <view class="box-item">
                <text v-if="item.cion !== '0'">金币+{{ item.cion }}</text>
              </view>
              <view class="box-item" v-if="item.vip !== '0'">
                <text>会员+{{ item.vip }}</text>
              </view>
            </view>
          </view>
        </view>
        <view
          @click="taskTo(item.id)"
          v-if="item.init == 0"
          style="
            padding: 13rpx 26rpx;
            display: flex;
            margin: auto 0 auto auto;
            border-radius: 33rpx;
            border: 2rpx solid #50cca6;
            font-size: 28rpx;
            font-weight: 500;
            color: #50cca6;
            line-height: 41rpx;
          "
        >
          {{
            item.id == 1
              ? "立即签到"
              : item.id == 2
              ? "去邀请"
              : item.daynum == 0
              ? "去完成"
              : item.daynum == 1
              ? "去完成"
              : "去完成" + item.nums + "/" + item.daynum
          }}
        </view>
        <view
          v-else
          style="
            border: 1px solid #999999;
            border-radius: 33rpx;
            color: #999999;
            padding: 2px 10px;
            display: flex;
            margin: auto 0 auto auto;
          "
        >
          已完成
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import w_md5 from "../../../js_sdk/zww-md5/w_md5.js";
import read from "./Images/read.png";
import com from "./Images/com.png";
import fav from "./Images/fav.png";
import invite from "./Images/invite.png";
export default {
  components: {
    w_md5,
  },
  data() {
    return {
      data: [],
      app_key: "",
      status_height: 0,
      love_list: [],
      task_top: 500,
      navColor: "#fff",
      navBgColor: "rgba(0,0,0,0)",
      invite_text: "", //邀请文案
      invite_code: 10001,
      value: true,
      coinList: [],
      currentCoin: 0,
      dayNums: 0,
      inactive: false,
      imageList: ["", invite, com, fav, read],
    };
  },
  onLoad(option) {
    this.invite_code = parseInt(option.invite) + 10000;
    this.getInvite();
    uni.getStorage({
      key: "notice",
      success: (res) => {
        this.inactive = res.data;
      },
      fail: () => {
        uni.setStorage({
          key: "notice",
          data: false,
        });
      },
    });
    this.get_tasklist();
    // this.get_love_list();
    this.status_height = uni.getSystemInfoSync().statusBarHeight + 48 + "px";
    this.getTaskList();
  },
  onPageScroll: function (e) {
    if (e.scrollTop >= 10) {
      this.navBgColor = "#fff";
      this.navColor = "#000";
    } else {
      this.navBgColor = "rgba(0,0,0,0)";
      this.navColor = "#fff";
    }
  },
  methods: {
    getInvite() {
      uni.request({
        url: getApp().globalData.websiteUrl + "/index.php/appv1/kxapps/invite",
        success: (res) => {
          console.log(res.data);
          this.invite_text = res.data.text;
        },
      });
    },
    getTaskList() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;
      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;
      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/task/tasklist?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log(res.data);
          this.coinList = res.data.code.coin;
          this.dayNums = res.data.code.day;
          // this.invite_text = res.data.text;
        },
      });
    },
    yuansu() {
      let _this = this;
      uni.getSystemInfo({
        success: function (res) {
          // res - 各种参数

          let obj = uni.createSelectorQuery().select(".a");

          obj
            .boundingClientRect(function (data) {
              // data - 各种参数

              console.log(data);
              _this.task_top = data.bottom;
              console.log(_this.task_top);
            })
            .exec();
        },
      });
    },
    taskTo(id) {
      if (id == "1") {
        var time = new Date().getTime();
        this.app_key = getApp().globalData.websiteKey;
        var param =
          "deviceid=" +
          getApp().globalData.deviceid +
          "&facility=" +
          getApp().globalData.facility +
          "&tid=" +
          id +
          "&timestamp=" +
          time +
          "&user_id=" +
          uni.getStorageSync("user").uid +
          "&user_token=" +
          uni.getStorageSync("user").utoken;
        var sign = w_md5.hex_md5_32Upper(param + this.app_key);
        uni.request({
          url:
            getApp().globalData.websiteUrl +
            "/index.php/appv1/task/add?" +
            param +
            "&sign=" +
            sign,
          success: (res) => {
            console.log("任务结果：", res.data);
            if (res.data.code == 1) {
              uni.showToast({
                icon: "success",
                title: res.data.msg,
              });
              this.get_tasklist();
              this.getTaskList();
            } else {
              uni.showToast({
                icon: "none",
                position: "bottom",
                title: "数据请求失败",
              });
            }
          },
        });
      } else if (id == "2") {
        let text = this.invite_text.replace(/{code}/g, this.invite_code);
        uni.shareWithSystem({
          summary: text,
          href: "", //ios必须带链接字段
          success() {
            // 分享完成，请注意此时不一定是成功分享
          },
          fail() {
            // 分享失败
          },
        });
      } else {
        uni.switchTab({
          url: "/pages/index/index",
        });
      }
    },
    get_tasklist() {
      var time = new Date().getTime();
      this.app_key = getApp().globalData.websiteKey;

      var param =
        "deviceid=" +
        getApp().globalData.deviceid +
        "&facility=" +
        getApp().globalData.facility +
        "&timestamp=" +
        time +
        "&user_id=" +
        uni.getStorageSync("user").uid +
        "&user_token=" +
        uni.getStorageSync("user").utoken;

      var sign = w_md5.hex_md5_32Upper(param + this.app_key);
      uni.request({
        url:
          getApp().globalData.websiteUrl +
          "/index.php/appv1/task/index?" +
          param +
          "&sign=" +
          sign,
        success: (res) => {
          console.log("任务列表：", res.data);
          if (res.data.code == 1) {
            this.data = res.data.list
              .map((item, index) => {
                return {
                  ...item,
                  image: this.imageList[index],
                };
              })
              .slice(0, 4);
            this.currentCoin = res.data.cion;
            setTimeout(() => {
              this.yuansu();
            }, 800);
          } else {
            uni.showToast({
              icon: "none",
              position: "bottom",
              title: "数据请求失败",
            });
            uni.navigateBack({});
          }
        },
      });
    },
    detail(id) {
      console.log(id);
      uni.navigateTo({
        url: "/pages/detail/detail?id=" + id,
      });
    },
    handleChange(value) {
      uni.setStorage({
        key: "notice",
        data: value,
      });
    },
  },
};
</script>

<style>
page {
  background-color: #f0f8f5;
}
.first-child {
  border-top: 1px solid #fbfbfb;
  margin-top: 30rpx !important;
}
.box-item {
  width: 94rpx;
  height: 32rpx;
  border-radius: 4rpx;
  /* border: 1rpx solid #cccccc; */
  margin-right: 4px;
  margin-top: 10rpx;
}
.button {
  height: 60rpx;
  background: transparent;
  border-radius: 33rpx;
  color: #fff;
  display: flex;
}
.item {
  width: 84rpx;
  height: 147rpx;
  background: #f5f7f9;
  border-radius: 8rpx;
  margin-right: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
